<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="mainor_form">
          <div class="mainor_te">
            <el-button @click="settClick(1)" class="mainor_tea"
              >批量结算</el-button
            >
          </div>
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="采购日期" prop="establishTime">
              <el-date-picker
                v-model="establishTime"
                type="daterange"
                class="time220"
                :editable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
              />
            </el-form-item>
            <el-form-item label="单据号" prop="related_order_sn">
              <el-input
                v-model.trim="form.related_order_sn"
                placeholder="单据号"
                clearable
                class="wid220"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购方式" prop="mode">
              <el-select
                v-model.trim="form.mode"
                placeholder="采购方式"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(modeList, index) in list.modeList"
                  :key="index"
                  :label="modeList"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采购员" prop="buyer_id">
              <el-select
                v-model.trim="form.buyer_id"
                placeholder="采购员"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(buyer, index) in list.buyer"
                  :key="index"
                  :label="buyer"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商" prop="supplier_id">
              <el-select
                v-model.trim="form.supplier_id"
                placeholder="供应商"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(supplier, index) in list.supplier"
                  :key="index"
                  :label="supplier"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="more el-form-item" @click="more">
              <span>更多</span>
              <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
            </div>
            <div class="clearfix"></div>
            <el-collapse-transition>
              <div v-if="moredata">
                <el-form-item label="商品" prop="name">
                  <el-input
                    v-model.trim="form.name"
                    placeholder="商品"
                    clearable
                    class="wid220"
                  ></el-input>
                </el-form-item>
                <el-form-item label="对账单号" prop="order_sn">
                  <el-input
                    v-model.trim="form.order_sn"
                    placeholder="对账单号"
                    clearable
                    class="wid220"
                  ></el-input>
                </el-form-item>
                <el-form-item label="对账状态" prop="account_status">
                  <el-select
                    v-model.trim="form.account_status"
                    placeholder="对账状态"
                    class="wid220"
                  >
                    <el-option label="所有" value=""></el-option>
                    <el-option
                      v-for="(account_status_list,
                      index) in list.account_status_list"
                      :key="index"
                      :label="account_status_list"
                      :value="parseInt(index + 1)"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算状态" prop="status">
                  <el-select
                    v-model.trim="form.status"
                    placeholder="结算状态"
                    class="wid220"
                  >
                    <el-option label="所有" value=""></el-option>
                    <el-option
                      v-for="(statusList, index) in list.statusList"
                      :key="index"
                      :label="statusList"
                      :value="parseInt(index + 1)"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算日期" prop="createTime">
                  <el-date-picker
                    v-model="createTime"
                    type="daterange"
                    class="time220"
                    :editable="false"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                    :picker-options="pickerOptions"
                  />
                </el-form-item>
                <el-form-item label="单据类型" prop="type">
                  <el-select
                    v-model.trim="form.type"
                    placeholder="单据类型"
                    class="wid220"
                  >
                    <el-option label="所有" value=""></el-option>
                    <el-option
                      v-for="(typeList, index) in list.typeList"
                      :key="index"
                      :label="typeList"
                      :value="parseInt(index)"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <div class="clearfix"></div>
              </div>
            </el-collapse-transition>
            <el-form-item class="marginTop10">
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="$refs['userListFrom'].resetFields()"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="main_num boxdq">
          <div class="main_num_l box">
            <p>
              <em
                >注意：对账单未对账也可结算；只有同一采购方式、同一采购员/供应商才能进行批量结算；对账单结算后，不可再进行对账；</em
              >
            </p>
          </div>
        </div>
        <div class="main_table marginTop10" style="min-height: 550px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list.list.data"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" :selectable="selectInit" />
            <el-table-column
              label="单据号"
              width="200"
              prop="related_order_sn"
            />
            <el-table-column label="单据类型" width="120">
              <template slot-scope="scope">{{
                list.typeList[scope.row.type]
              }}</template>
            </el-table-column>
            <el-table-column label="采购方式" width="120">
              <template slot-scope="scope">{{
                list.modeList[scope.row.mode]
              }}</template>
            </el-table-column>
            <el-table-column label="采购员/供应商" width="140">
              <template slot-scope="scope">{{
                scope.row.mode == 1
                  ? list.buyer[scope.row.buyer_id]
                  : list.supplier[scope.row.supplier_id]
              }}</template>
            </el-table-column>
            <el-table-column
              label="采购日期"
              width="120"
              prop="related_order_sn"
            >
              <template slot-scope="scope">{{
                scope.row.purchase_time
                  ? parseTime(scope.row.purchase_time, "{y}-{m}-{d}")
                  : ""
              }}</template>
            </el-table-column>
            <el-table-column
              label="应付金额"
              width="120"
              prop="account_money"
            />
            <el-table-column label="实付金额" width="120" prop="paid" />
            <el-table-column label="抹零金额" width="120" prop="zero_amount" />
            <el-table-column label="未付金额" width="120" prop="unpaid" />
            <el-table-column label="对账单号" width="120" prop="order_sn" />
            <el-table-column label="对账状态" width="120" prop="status">
              <template slot-scope="scope">{{
                list.account_status_list[scope.row.account_status]
              }}</template>
            </el-table-column>
            <el-table-column label="结算状态" width="120" prop="status">
              <template slot-scope="scope">{{
                list.statusList[scope.row.status]
              }}</template>
            </el-table-column>
            <el-table-column
              label="管理操作"
              align="center"
              fixed="right"
              width="240"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <router-link :to="'/financial/recharge/see/' + scope.row.id">
                  <el-link type="success">查看</el-link>
                </router-link>
                <router-link
                  :to="'/financial/recharge/record/' + scope.row.id"
                  v-if="scope.row.status != 2"
                >
                  <el-link type="warning">对账</el-link>
                </router-link>
                <el-link
                  type="primary"
                  @click="(id = scope.row.id), settClick(2)"
                  v-if="scope.row.status != 2"
                  >结算</el-link
                >
                <el-link>打印</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>

        <!-- 结算 -->
        <el-dialog
          title="结算"
          :visible.sync="settFormVisible"
          class="main_dialog dialog840"
        >
          <el-form
            :inline="false"
            :rules="rules"
            :model="info"
            class="demo-form-inline"
            ref="userListFrom1"
            label-width="0"
            key="userListFrom1"
          >
            <div class="main_xq">
              <ul class="boxha">
                <li>
                  采购方式：<span>{{
                    info.data.modeList[info.data.info.mode]
                  }}</span>
                </li>
                <li>
                  采购员/供应商：<span>{{
                    info.data.info.mode == 1
                      ? info.data.buyer[info.data.info.buyer_id]
                      : info.data.supplier[info.data.info.supplier_id]
                  }}</span>
                </li>
                <li>
                  应付金额：<span>{{ info.data.info.money }}</span>
                </li>
                <li>
                  已付金额：<span>{{ info.data.info.paid }}</span>
                </li>
                <li>
                  未付金额：<span>{{ info.data.info.unpaid }}</span>
                </li>
                <li>
                  付款金额：<span>{{ total }}</span>
                </li>
                <div class="clearfix"></div>
                <li class="main_w100 marginTop10 boxha boxnr">
                  付款方式：
                  <span class="main_xqs" style="width: 30%">
                    <el-form-item
                      label=""
                      prop="info_form.pay_type"
                      :rules="rules.pay_type"
                    >
                      <el-select
                        v-model.trim="info.info_form.pay_type"
                        placeholder="付款方式"
                        class="wid220"
                      >
                        <el-option
                          v-for="(pay_type_list, index) in info.data
                            .pay_type_list"
                          :key="index"
                          :label="pay_type_list"
                          :value="parseInt(index)"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </span>
                </li>
                <li class="main_w100 marginTop15 boxha boxnr">
                  收款人：
                  <span class="main_xqs" style="width: 30%">
                    <el-form-item
                      label=""
                      prop="info_form.payee"
                      :rules="rules.payee"
                    >
                      <el-input
                        v-model.trim="info.info_form.payee"
                        placeholder="收款人"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </span>
                </li>
                <li class="main_w100 marginTop15 boxha boxnr">
                  备注：
                  <span class="main_xqs" style="margin-left: 12px">
                    <el-form-item label="" prop="info_form.remark">
                      <el-input
                        v-model.trim="info.info_form.remark"
                        placeholder="备注"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </span>
                </li>
                <li class="main_w100 marginTop15 boxha">
                  上传凭证(3张)：
                  <span class="main_xqs">
                    <div class="box main_xqi">
                      <div class="main_upImg">
                        <el-upload
                          :action="uploadPath"
                          list-type="picture-card"
                          :on-success="handSuccess"
                          :on-remove="handleRemove"
                          :limit="3"
                          :file-list="filelist"
                        >
                          <span slot="default">
                            <svg
                              aria-hidden="true"
                              class="main_page_svg"
                              width="32"
                              height="27"
                            >
                              <use xlink:href="#icon-commodit_camera" />
                            </svg>
                          </span>
                        </el-upload>
                        <div class="clearfix"></div>
                      </div>
                    </div>
                  </span>
                </li>
              </ul>
            </div>
            <div class="main_table marginTop0">
              <el-table
                ref="multipleTable1"
                v-loading="listLoading"
                :data="info.data.list"
                element-loading-text="加载中"
                fit
                highlight-current-row
                key="multipleTable1"
              >
                <el-table-column
                  label="单据号"
                  prop="order_sn"
                  width="180"
                  class-name="main_hei"
                />
                <el-table-column label="单据类型" width="120">
                  <template slot-scope="scope">{{
                    info.data.typeList[scope.row.type]
                  }}</template>
                </el-table-column>
                <el-table-column
                  label="应付金额"
                  prop="account_money"
                  width="120"
                  class-name="main_hei"
                />
                <el-table-column
                  label="已付金额"
                  prop="paid"
                  width="120"
                  class-name="main_hei"
                />
                <el-table-column
                  label="未付金额"
                  prop="unpaid"
                  width="120"
                  class-name="main_hei"
                />
                <el-table-column
                  label="付款金额"
                  prop="pay_money"
                  width="150"
                  class-name="main_hei"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'data.list.' + scope.$index + '.pay_money'"
                      :rules="rules.pay_money"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.pay_money"
                        placeholder="付款金额"
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="抹零金额"
                  prop="zero_amount"
                  width="150"
                  class-name="main_hei"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'data.list.' + scope.$index + '.zero_amount'"
                      :rules="rules.zero_amount"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.zero_amount"
                        placeholder="抹零金额"
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="剩余未付"
                  width="120"
                  class-name="main_hei"
                >
                  <template slot-scope="scope">{{
                    scope.row.unpaid - scope.row.pay_money
                      ? (scope.row.unpaid - scope.row.pay_money- scope.row.zero_amount).toFixed(2)
                      : "0.00"
                  }}</template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  prop="remark"
                  width="350"
                  class-name="main_hei"
                >
                  <template slot-scope="scope">
                    <el-form-item label-width="0" label="">
                      <el-input
                        v-model.trim="scope.row.remark"
                        placeholder="备注"
                        class="wid240"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <span class="footer_red">合计:￥{{ total }}</span>
            <el-button type="primary" @click="settupmine" v-repeatClick
              >结 算</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  account_index,
  account_paid,
  account_getList,
} from "@/api/financial/financialRecharge";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import dateOption from "@/options/dateOption";
import { parseTime, getWeekStartAndEnd } from "@/utils/index";
import rules from "@/rules/financial/financialRecharge";
import { uploadPath } from "@/api/currency";

export default {
  computed: {
    total() {
      let zs = 0;
      this.info.data.list.forEach((e) => {
        zs += parseFloat(e.pay_money);
      });
      return zs ? zs.toFixed(2) : 0;
    },
  },
  components: {},
  data() {
    return {
      // 验证
      rules,
      // 上传图片
      filelist: [],
      uploadPath,
      // 时间
      parseTime,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: {
        list: [],
      },
      info: {
        data: {
          info: {
            order_sn: "",
            contact: "",
            mobile: "",
            address: "",
            admin_user_name: {
              name: "",
            },
          },
          list: [],
          buyer: ["未分拣"],
          modeList: ["未分拣"],
          supplier: ["未分拣"],
          pay_type_list: ["未分拣"],
          typeList: ["未分拣"],
        },
        info_form: {
          mode: null,
          buyer_id: null,
          supplier_id: null,
          pay_type: null,
          payee: "",
          remark: "",
          pics: [],
        },
      },
      id: "",
      type: 1,
      settFormVisible: false,
      listLoading: false,
      // 搜索
      form: {
        account_status: null,
        status: null,
        type: null,
        name: "",
        order_sn: "",
        related_order_sn: "",
        account_start_time: "",
        account_end_time: "",
        start_time: "",
        end_time: "",
        mode: null,
        buyer_id: null,
        supplier_id: null,
      },
      createTime: [],
      establishTime: [],
      pickerOptions: dateOption,
      // 更多
      moredata: false,
      // 全选
      selectArr: [],
    };
  },
  created() {
    // 列表
    this.account_index();
  },
  methods: {
    // 监听绑定全选不可勾选
    selectInit(row, index) {
      if (row.status != 2) {
        return true;
      } else {
        return false;
      }
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map((item) => {
        this.selectArr.push({ id: item.id });
      });
    },
    // 上传图片-删除
    handleRemove(file) {
      const i = this.info.info_form.pics.findIndex(
        (item) => item.path == file.path
      );
      this.info.info_form.pics.splice(i, 1);
    },
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      // console.log(res, file, fileList);
      this.info.info_form.pics.push({
        name: "",
        path: res.path,
        url: res.src,
      });
    },
    // 结算
    settClick(type) {
      if (type == 1) {
        if (this.selectArr.length == 0) {
          this.$message.error("请勾选订单");
          return;
        }
      }
      this.type = type;
      let ids = type == 1 ? this.selectArr : [{ id: this.id }];
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { ids: JSON.stringify(ids) }
      );
      account_getList(data).then((res) => {
        if (res.errcode == 0) {
          res.data.list.map((e) => {
            e.pay_money = e.account_money;
            e.zero_amount = "";
          });
          this.info.info_form.mode = res.data.info.mode;
          this.info.info_form.supplier_id = res.data.info.supplier_id;
          this.info.info_form.buyer_id = res.data.info.buyer_id;
          this.info.data = res.data;
          this.settFormVisible = true;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    settupmine() {
      this.$refs["userListFrom1"].validate((valid) => {
        if (valid) {
          this.$confirm("确定结算吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let arry = [];
              let info = JSON.parse(JSON.stringify(this.info));
              info.info_form.pics = info.info_form.pics
                .map((e) => e.path)
                .join(",");
              info.data.list.map((e) => {
                arry.push({
                  id: e.id,
                  pay_money: e.pay_money,
                  zero_amount: e.zero_amount,
                  remark: e.remark,
                });
              });
              let data = Object.assign(
                {
                  sign: Md5(
                    objKeySort(Object.assign(apiUrl().name)) +
                      apiUrl().appsecret
                  ),
                },
                apiUrl().name,
                info.info_form,
                { list: JSON.stringify(arry) }
              );
              account_paid(data).then((res) => {
                this.settFormVisible = false;
                if (res.errcode == 0) {
                  this.$message({
                    message: "结算成功",
                    type: "success",
                  });
                  this.account_index();
                } else {
                  this.$message.error(res.errmsg);
                }
              });
            })
            .catch(() => {});
        }
      });
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.account_index();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.account_index();
    },
    changePage(page) {
      this.current.page = page;
      this.account_index();
    },
    // 列表
    account_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      account_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.start_time = this.createTime[0] ? this.createTime[0] : "";
      form.end_time = this.createTime[1] ? this.createTime[1] : "";
      form.account_start_time = this.establishTime[0]
        ? this.establishTime[0]
        : "";
      form.account_end_time = this.establishTime[1]
        ? this.establishTime[1]
        : "";

      return form;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 180px);
  }

  .main_dialog {
    .main_xq {
      /deep/.el-form-item--small.el-form-item {
        margin-bottom: 0;
      }
    }

    .main_table {
      /deep/.el-table__body-wrapper {
        overflow-y: auto;
        height: 200px;
      }
      /deep/.el-table--small td {
        padding-top: 0;
      }
      /deep/.el-form-item--small.el-form-item {
        margin-bottom: 16px;
        margin-top: 16px;
        margin-right: 0;
      }
    }
    .main_xq ul li {
      width: 33.33%;
      margin-top: 5px;
      margin-bottom: 5px;
      .main_xqs {
        width: 85%;
        display: block;
        text-align: left;
        /deep/.el-input--small {
          width: 100%;
        }
      }
    }
    .footer_red {
      font-size: 16px;
      color: red;
      margin-right: 10px;
    }
  }
}
</style>
